<template>
  <div style="background-color:#F2F7FB;">
    <div id="all">
        <div id="center">
            <div id="imgone">
                <font id="fonttitle">家庭医生后台管理系统</font>
                <img id="imge" src="../../assets/common/u1216.png" />
            </div>
            <div id="loginone">
              <img id="message1" src="../../assets/common/u455.jpg" />
                <h1>欢迎登录</h1>
                <el-form :rules="rules" ref="loginForm" :model="LoginForm" v-model="LoginForm" class="loginContainer">
                  <el-form-item prop="userName">
                      <el-input type="text" auto-complete="false" v-model="LoginForm.login_num" placeholder="请输入用户名" id="loginNum" @keyup.enter.native="submitLogin"></el-input>
                  </el-form-item>
                  <el-form-item prop="userPwd">
                      <el-input type="password" auto-complete="false" v-model="LoginForm.login_pwd" placeholder="请输入密码"  id="loginPwd" @keyup.enter.native="submitLogin"></el-input>
                  </el-form-item>
                  <el-checkbox v-model="checked">我已阅读并同意《用户隐私政策》</el-checkbox>
                  <br /><br />
                  <el-button id="btn" type="primary" style="width:100%;" @click="submitLogin">登录</el-button>
                </el-form>
                <p id="forget">忘记密码请联系管理员</p>
            </div>
        </div>
    </div>
  </div>
</template>
<script>
import { postRequest } from '@/utils/api'
export default {
    data() {
        return {
          LoginForm:{
            login_num:'',
            login_pwd:'',
          },
          checked:true,
          rules:{
            login_num:[{required:true ,message:"请输入用户名",trigger:"blur"}],
            login_pwd:[{required:true ,message:"请输入密码",trigger:"blur"}]
          }
        }
      },
      methods: {
        submitLogin(){
            this.$refs.loginForm.validate((valid) => {
                if(valid){
                  postRequest("doctor/login",this.LoginForm).then(resp=>{
                      if(resp.data.code==200){
                        this.$message.success('登录成功')
                        window.sessionStorage.setItem('loginPwd',resp.data.data.login_pwd)
                        window.sessionStorage.setItem('userId',resp.data.data.doctor_id)
                        window.sessionStorage.setItem('img',resp.data.data.doctor_img)
                        window.sessionStorage.setItem('doctorName',resp.data.data.doctor_name)
                        this.$router.push({ path: this.redirect || "/HomePage" })
                      }else {
                        console.log(resp.data.msg);
                        this.$message.error(resp.data.msg);
                      }
                  })
                }
            })
        }
      },
}
</script>

<style>
    .loginContainer{
        border-radius: 15px;
        background-clip: padding-box;
        width: 350px;
        margin-left: 130px;
        
    }

    #all{
        width: 100%;
        height: 715px;
        /* opacity: 0.9; */
    }

    #center{
        width: 1200px;
        height: 660px;
        position: absolute;
        top: 40px;
        left: 190px;
    }
    #imgone{
        width: 600px;
        height: 660px;
        background-color: #2984F8;
        border-top-left-radius: 10px;
        border-bottom-left-radius: 10px;
        float: left;
    }

    #loginone{
        width: 600px;
        height: 660px;
        background-color: #ffffff;
        border-top-right-radius: 10px;
        border-bottom-right-radius: 10px;
        float: left;
    }

    #fonttitle{
        color: #FFFFFF;
        text-rendering: optimizeLegibility;
        line-height: 60px;
        font-family: 'PingFangSC-Regular', 'PingFang SC';
        margin-left: 20px;
    }


    #message1{
        width: 40px;
        height: 40px;
        position: absolute;
        top: 160px;
        left: 880px;
    }

    #imge{
        width: 349px;
        height: 244px;
        position: absolute;
        top: 220px;
        left: 100px;
    }

    h1{
        margin-top: 210px;
        margin-left: 240px;
    }


    #forget{
        font-size: 12px;
        color: #C9C9C9;
        margin-top: 10px;
        margin-left: 230px;
    }

    #loginNum{
      border-radius: 8px;
      background-color: rgba(242, 247, 251, 1);
      color: #2984F8;
    }
    

    #loginPwd{
      border-radius: 8px;
      background-color: rgba(242, 247, 251, 1);
      color: #2984F8;
    }
    

    #btn{
      border-radius: 8px;
      background-color: #2984F8;
    }

   

   
</style> 